<template>
  <div class="chart-container">
    <div class="title-container">
      <h2>订单数据统计</h2>
    </div>
   
    <el-row :gutter="20" class="chart-row">
		<div class="kuang">
			<div id="dingdan" prop="data" label="订单数量"> 订单数量 {{this.orderList}} </div>
			
			<div id="tuih" prop="tuih" label="退货量"> 退货量 {{this.returnList}} </div>
		</div>
		   
	
      <el-col :span="20">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单数据统计图</span>
          </div>
          <div ref="chart" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import * as echarts from 'echarts';
import { getOrdersAll  } from "@/api/order/courseOrders.js";
import { getReturnAll } from "@/api/order/return.js"

export default {
  name: "FavoriteChart",
  data() {
    return {
      chartInstance: null,
      orderList: 0,
	  returnList: 0,
      queryParams: {
		data: null,
        pageNum: 1,
        pageSize: 10,     
      },
      chartData: {
        categories: ['订单统计'],
        values: [
           { name: '订单统计', type: 'bar', yAxisIndex: 0, data: [] }, // 订单数量
           { name: '退货统计', type: 'bar', yAxisIndex: 0, data: [] }  // 退货数量
        ],
		
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getOrdersAll().then(response => {
		console.log(response);
        this.orderList = response.data;
		console.log(response.data.data);
        this.total = response.total;
		console.log(response.total);
        this.loading = false;
		// 更新图表数据
		this.chartData.values[0].data = [this.orderList, 0]; // 假设退款量为0
		this.initChart(); // 重新初始化图表
      });
	  
	  getReturnAll().then(response => {
		 console.log(response);
		 this.returnList = response.data;
		 console.log(response.data.data);
		 this.total = response.total;
		 this.loading = false;
		 // 更新图表数据
		 this.chartData.values[1].data = [this.returnList, 0]; // 假设退款量为0
		 this.initChart(); // 重新初始化图表
		  
	  })
    },
	// updateChartData() {
	//   if (this.courseList.length > 0) {
	//     const courseData = this.courseList[0]; // 假设返回的是一个数组，取第一个元素
	//     const likeNum = courseData.likeNum;
	//     const collectNum = courseData.collectNum;
	//     const shareNum = courseData.shareNum;
	//     this.chartData.values[0].data = [likeNum, collectNum, shareNum];
	//     this.initChart();
	//   } else {
	//     this.chartData.values[0].data = [];
	//     this.initChart();
	//     console.error('响应数据为空或格式不正确');
	//   }
	// },
   initChart() {
         this.chartInstance = echarts.init(this.$refs.chart);
              const option = {
                tooltip: {
                  trigger: 'axis',
                  axisPointer: { type: 'cross' }
                },
                legend: {
                  data: ['订单统计', '退货统计']
                },
                xAxis: [
                  {
                    type: 'category',
                    axisTick: {
                      alignWithLabel: true
                    },
                    data: this.chartData.categories
                  }
                ],
                yAxis: [
                  {
                    type: 'value', // 修改为 'value'
                    name: '数量',
                    min: 0,
                    max: 200, // 根据实际数据调整
					show: true,
                    position: 'top',
                    axisLabel: {
                      formatter: '{value} 次'
                    }
                  }
                ],
                series: this.chartData.values
              };
              this.chartInstance.setOption(option);
            }
          }
};
</script>


<style scoped>
.chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 20px;
}

.title-container {
  text-align: left;
  width: 100%;
  
}

.table-container {
	
 float: left;
  width: 100%;
}

.chart-row {
  margin-top: 20px;
  width: 100%;
}

.box-card {
	float: left;
  width: 100%;
}

.tree {
  margin-top: 10px;
}

.chart {
  width: 100%;
  height: 600px;
}

.el-table {
  margin-top: 20px;
}

.el-table th {
  background-color: #f2f2f2;
}

.el-table th, .el-table td {
  padding: 10px;
  border: 1px solid #ddd;
}

.el-table th.is-leaf {
  border-bottom: 1px solid #ddd;
}

.el-table::before {
  height: 0;
}
.kuang {
	float: left;
	margin-left: 20px;
	margin-right: 40px;
}
#dingdan {
	float: left;
	
	margin-right: 20px;
	
}

#tuih {
	
	margin-top: 30px;
	
	margin-right: 20px;
}
</style>
